<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <style>
        html,body{
            background: transparent;
        }
        .flex{display: -webkit-box; display: -webkit-flex; display: flex;}
        .arrow01 {
            width: 0.12rem;
            height: 0.07rem;
            background-size: 0.12rem 0.07rem;
            background-image: url(../image/tools/arrow01.png);
        }
        .not-active {
            display: none;
        }
    </style>
</head>
<body>
    <div id="member-list-empty" class="flex not-active" style="width: 100%; height: 100%; justify-content: center; align-items: center;">
        <div style="width: 1.80rem">
            <p style="width: 100%; font-size: 0.16rem; color: #28354C; text-align: center;">暂无信息</p>
            <p style="width: 100%; font-size: 0.14rem; color: #83889A; text-align: center; margin-top: 0.10rem">点击添加成员获取信息</p>
            <div style="width: 100%; height: 0.45rem; font-size: 0.17rem; color: white; text-align: center; line-height: 0.45rem; margin-top: 0.28rem; border-radius: 0.225rem; background-color: #3E86FF;" tapmode onclick="openAddMemberWin()">添加成员</div>
        </div>
    </div>
    <div id="today-fortune" class="not-active" style="width: 100%;">
        <div style="width: 100%; height: 0.30rem"></div>
        <div class="flex" style="width: 100%; justify-content: center;">
            <div class="flex" style="align-items: center;">
                <p></p>
                <div class="arrow01"></div>
            </div>
        </div>
        <div class="flex" style="width: 100%; justify-content: center; margin-top: 0.32rem">
            <div class="flex" style="justify-content: space-between; align-items: center; width: 100%">
                <div id="echarts-left" style="width: 95px"></div>
                <div id="echarts-right" style="width: 200px;"></div>
            </div>
        </div>
    </div>
</body>
</html>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common/common.js"></script>
<script type="text/javascript" src="../script/common/echarts/echarts.min.js"></script>
<script type="text/javascript">
    var memberListEmptyEl, todayFortuneEl, echartsLeftEl, echartsRightEl, echartsLeftHeight, echartsRightHeight, myChartLeft, myChartRight, optionLeft, optionRight;
    var memberList = [], appLeft = {}, appRight = {};
    apiready = function () {
        memberListEmptyEl = $api.byId("member-list-empty");
        todayFortuneEl = $api.byId("today-fortune");
        echartsLeftEl = $api.byId("echarts-left");
        echartsLeftHeight = 111*(api.winWidth/375); //92
        $api.css(echartsLeftEl,'height:' + echartsLeftHeight + 'px');
        echartsRightEl = $api.byId("echarts-right");
        echartsRightHeight = 100*(api.winWidth/375); //73
        $api.css(echartsRightEl,'height:' + echartsRightHeight + 'px');

        myChartLeft = echarts.init(echartsLeftEl);
        myChartRight = echarts.init(echartsRightEl);


        // myChartRight.setOption(optionRight, true);

        getMemberList();
    }

    function getMemberList() {
        api.ajax({
            url: apiUrl + '/tools/member-list',
            tag: '/tools/member-list',
            method: 'get',
            data: {
                values: {
                    token: $api.getStorage("token"),
                }
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.code == 0) {
                    memberList = ret.data.member_list;
                    if (memberList.length == 0) {
                        $api.removeCls(memberListEmptyEl, "not-active");
                    } else {
                        // $api.removeCls(memberListEmptyEl, "not-active");
                        $api.removeCls(todayFortuneEl, "not-active");
                        getTodayFortune(memberList[0]["member_id"]);
                    }
                } else {
                    api.toast({
                        msg: ret.err_msg,
                        duration: 2000,
                        location: 'middle'
                    });
                }
            } else {
                // api.alert({ msg: JSON.stringify(err) });
            }
        });
    }

    function getTodayFortune(memberId) {
        api.ajax({
            url: apiUrl + '/tools/today-fortune',
            tag: '/tools/today-fortune',
            method: 'get',
            data: {
                values: {
                    token: $api.getStorage("token"),
                    member_id: memberId,
                }
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.code == 0) {
                    optionLeft = {
                        color:['#FE5578', '#FCEDF0'],
                        graphic:{
                            type:'text',
                            left:'center',
                            top:'center',
                            style:{
                                text:ret.data.composite + "分",
                                textAlign:'center',
                                fill:'#FE5578',
                                width:40,
                                height:40
                            }
                        },
                        series: [
                            {
                                type:'pie',
                                radius: ['50%', '70%'],
                                avoidLabelOverlap: false,
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    },
                                },
                                // clockwise:false,
                                data:[
                                    {value:ret.data.composite},
                                    {value:100-ret.data.composite},
                                ]
                            }
                        ]
                    };
                    myChartLeft.setOption(optionLeft, true);

                    optionRight = {
                        xAxis:  {
                            show : false,
                        },
                        yAxis: {
                            type: 'category',
                            data: ['爱情:','工作:','财运:','健康:']
                        },
                        series: [
                            {
                                name: '视频广告',
                                type: 'bar',
                                stack: '总量',
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'insideRight'
                                    }
                                },
                                data: [87, 83, 73, 91]
                            },
                            {
                                name: '搜索引擎',
                                type: 'bar',
                                stack: '总量',
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'insideRight'
                                    }
                                },
                                data: [13, 17, 27, 9]
                            }
                        ]
                    };
                    myChartRight.setOption(optionRight, true);
                } else {
                    api.toast({
                        msg: ret.err_msg,
                        duration: 2000,
                        location: 'middle'
                    });
                }
            } else {
                // api.alert({ msg: JSON.stringify(err) });
            }
        });
    }

    function openAddMemberWin() {
        api.openWin({
            name: 'addMemberWin',
            url: './tool/addMemberWin.html',
            slidBackType: 'edge',
            animation: {
                type:"movein",
                subType:"from_right",
                duration:300
            }
        });
    }
</script>
